<template>
  <base-layout>
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        label-width="90px"
        label-position="right"
        readonly
      >
        <el-row>
          <el-col :span="12">精品信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="精品名称:">
              <div>{{ fromdata.partsName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属门店:">
              <div>{{ fromdata.storeName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="一级类别:">
              <div>{{ fromdata.partsType }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级类别:">
              <div>{{ fromdata.partsUnit }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="精品编号:">
              <div>{{ fromdata.partsCode }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="精品资源:">
              <div>{{ fromdata.partsModel }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="精品供应商:" label-width="150">
              <div>{{ fromdata.supplierName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="精品备注:">
              <div>{{ fromdata.remark }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="现存仓库:">
              <div>{{ fromdata.storageName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓库编号:" prop="remark">
              <div>{{ fromdata.storageCode }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-row>
        <el-col :span="22">精品存放仓位列表</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <data-table
          :value="tableData"
          :total-count="totalCount"
          :has-action="true"
          :isShowSerialNum='true'
          :table-column-attributes="tableColumnAttributes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :width="160"
        >
          <template #action="{ row }">
            <i
              class="el-icon-s-unfold"
              title="编辑"
              style="margin-left: 20px; cursor: pointer"

              @click="handleDetail(row)"
            ></i>
          </template>
        </data-table>
      </el-row>
      <el-dialog
        title="仓位精品列表详情"
        :visible.sync="visible"
        width="60%"
        :before-close="handleClose">
        <el-form :model="ruleFrom" label-width="10px">
          <el-row :guteer="24">
            <el-col :span="8">
              <el-form-item label="">
                <el-input v-model="ruleFrom.purchaseCode" clearable placeholder="库存编号" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: right;">
              <el-button type="primary" @click="search('applyForm')">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
          <data-table
            :value="tableDataTwo"
            :total-count="totalCountTwo"
            :has-action="false"
            :table-column-attributes="tableColumnAttributesTwo"
            @size-change="handleSizeChangeTwo"
            @current-change="handleCurrentChangeTwo"
            :width="160"
          >
          </data-table>
      </el-dialog>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  getDetail,
  getSitePage,
  getStatPage
} from '@/api/pre-sale/boutiqueStock/storageManagement'
import { getDict } from '@/utils'

export default {
  mixins: [
    baseMixin({
      idName: 'id',
      dataName: ['content', 'totalRecords'],
      format(res) {
        return res.map((data) => {
          data.canNum = data.num - data.alreadyNum
          data.amount = data.alreadyNum * data.purchasePrice
          return data
        })
      }
    })
  ],
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalCount: 0,
      pageNoTwo: 1,
      pageSizeTwo: 10,
      totalCountTwo: 0,
      tableData: [],
      tableDataTwo: [],
      dict: [],
      ruleFrom: {
        stockId: '', // 库存id
        storageSiteId: '', // 仓位id
        storeId: '', // 门店id
        supplierId: '' // 供应商id
      },
      visible: false,
      fromdata: {},
      from: { stockId: '' },
      tableColumnAttributes: [
        { name: '精品仓库', value: 'storageSiteName', type: 'text' },
        { name: '仓位编号', value: 'storageSiteCode', type: 'text' },
        { name: '库存数量', value: 'totalNum', type: 'text' },
        { name: '现有库存', value: 'existNum', type: 'text' },
        { name: '可增加库存', value: 'remainderNum', type: 'text' },
        { name: '采购成本', value: 'avgPurchasePrice', type: 'text' },
        { name: '库房标价', value: 'avgStoragePrice', type: 'text' },
        { name: '总金额', value: 'amount', type: 'text' }
      ],
      tableColumnAttributesTwo: [
        { name: '库存编号', value: 'purchaseCode', type: 'text' },
        { name: '精品编号', value: 'partsCode', type: 'text' },
        { name: '精品名称', value: 'partsName', type: 'text' },
        { name: '一级类别', value: 'partsType', type: 'text' },
        { name: '二级类别', value: 'partsUnit', type: 'text' },
        { name: '入库时间', value: 'createTime', type: 'text' },
        { name: '采购成本', value: 'purchasePrice', type: 'text' },
        { name: '销售价', value: 'storagePrice', type: 'text' }
      ],
      siteId: ''
    }
  },
  methods: {
    // 搜索
    search() {
      this.getStatPage()
    },
    // 仓位配件列表详情
    handleSizeChangeTwo(pageSize) {
      this.pageSizeTwo = pageSize
      this.getStatPage()
    },
    // 仓位配件列表详情
    handleCurrentChangeTwo(currentPage) {
      this.pageNoTwo = currentPage
      this.getStatPage()
    },
    // 查看详情
    handleDetail(row) {
      this.visible = true
      this.siteId = row.storageSiteId
      this.getStatPage()
    },
    // 仓位配件列表
    async getStatPage() {
      const { data } = await getSitePage({
        siteId: this.siteId,
        stockId: this.$route.query.id,
        pageNo: this.pageNoTwo,
        pageSize: this.pageSizeTwo,
        purchaseCode: this.ruleFrom.purchaseCode
      })
      this.tableDataTwo = data.content || []
      this.totalCountTwo = data.totalRecords
    },
    // 仓位配件列表详情
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getSitePage()
    },
    // 仓位配件列表详情
    handleCurrentChange(currentPage) {
      this.pageNo = currentPage
      this.getSitePage()
    },
    // 库存仓位统计分页查询-界面2
    async getSitePage() {
      const { data } = await getStatPage({
        stockId: this.$route.query.id,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      this.tableData = data.content || []
      this.totalCount = data.totalRecords
    },
    // 关键弹窗
    handleClose() {
      this.visible = false
    },
    // 详情
    async detail(id) {
      const { data } = await getDetail(id)
      this.fromdata = data
      this.tableData = data.siteList || []
      this.totalCount = data.siteList.length || 0
    }
  },
  created() {
    const id = this.$route.query.id
    if (id) this.from.stockId = id
    this.searchOptions = this.from
  },
  mounted() {
    const id = this.$route.query.id
    if (id) {
      this.detail(id)
    }
    this.dict = getDict(['汽车配件类型'], this.$route.query.id)
  }
}
</script>
<style lang="scss" scoped>
</style>
